<template>
  <view class="upload-page">
    <!-- 照片预览区 -->
    <view class="photo-preview">
      <view class="preview-title">已选择照片 ({{ photoList.length }}/9)</view>
      <view class="photo-grid">
        <view 
          v-for="(photo, index) in photoList" 
          :key="index" 
          class="photo-item">
          <image :src="photo" mode="aspectFill" class="photo-img"></image>
          <view class="photo-delete" @click="deletePhoto(index)">
            <text class="iconfont icon-close"></text>
          </view>
        </view>
        
        <!-- 添加照片按钮 -->
        <view 
          v-if="photoList.length < 9" 
          class="photo-add" 
          @click="choosePhoto">
          <text class="iconfont icon-camera"></text>
          <text class="add-text">添加照片</text>
        </view>
      </view>
    </view>

    <!-- 描述输入区 -->
    <view class="desc-card">
      <view class="desc-title">添加描述</view>
      <textarea
        v-model="description"
        class="desc-input"
        placeholder="记录一下此刻的心情吧～（可选）"
        maxlength="200"
        :show-confirm-bar="false"
      />
      <view class="char-count">{{ description.length }}/200</view>
    </view>

    <!-- 常用描述快捷选择 -->
    <view class="quick-select">
      <view class="quick-title">快捷描述</view>
      <view class="quick-tags">
        <text
          v-for="(tag, index) in quickTags"
          :key="index"
          class="tag-item"
          @click="selectQuickTag(tag)">
          {{ tag }}
        </text>
      </view>
    </view>

    <!-- 底部提交按钮 -->
    <view class="bottom-bar">
      <button class="submit-btn" @click="handleSubmit" :disabled="photoList.length === 0">
        上传照片
      </button>
    </view>
  </view>
</template>

<script>
import { uploadPhotos } from '@/api/service'

export default {
  data() {
    return {
      orderId: '',
      photoList: [],
      description: '',
      quickTags: [
        '到达景点',
        '休息中',
        '登顶成功',
        '风景绝美',
        '安全第一',
        '服务中'
      ]
    }
  },
  
  onLoad(options) {
    this.orderId = options.orderId
  },
  
  methods: {
    // 选择照片
    choosePhoto() {
      const remainCount = 9 - this.photoList.length
      uni.chooseImage({
        count: remainCount,
        sizeType: ['compressed'],
        sourceType: ['camera', 'album'],
        success: (res) => {
          this.photoList.push(...res.tempFilePaths)
        }
      })
    },
    
    // 删除照片
    deletePhoto(index) {
      this.photoList.splice(index, 1)
    },
    
    // 选择快捷标签
    selectQuickTag(tag) {
      if (this.description) {
        this.description += '、' + tag
      } else {
        this.description = tag
      }
    },
    
    // 提交上传
    async handleSubmit() {
      if (this.photoList.length === 0) {
        uni.showToast({ title: '请选择至少一张照片', icon: 'none' })
        return
      }
      
      try {
        uni.showLoading({ title: '上传中...' })
        
        await uploadPhotos({
          orderId: this.orderId,
          photos: this.photoList,
          description: this.description || '服务过程记录'
        })
        
        uni.showToast({ 
          title: '上传成功', 
          icon: 'success',
          duration: 2000
        })
        
        // 延迟返回上一页
        setTimeout(() => {
          uni.navigateBack()
        }, 2000)
        
      } catch (error) {
        uni.showToast({ 
          title: error.msg || '上传失败', 
          icon: 'none' 
        })
      } finally {
        uni.hideLoading()
      }
    }
  }
}
</script>

<style scoped>
.upload-page {
  min-height: 100vh;
  background: #f5f7fa;
  padding: 20rpx;
  padding-bottom: 160rpx;
}

.photo-preview {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.preview-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20rpx;
}

.photo-item {
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  border-radius: 12rpx;
  overflow: hidden;
}

.photo-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.photo-delete {
  position: absolute;
  top: 5rpx;
  right: 5rpx;
  width: 40rpx;
  height: 40rpx;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.photo-delete .iconfont {
  color: #fff;
  font-size: 24rpx;
}

.photo-add {
  width: 100%;
  padding-bottom: 100%;
  border: 2rpx dashed #dcdfe6;
  border-radius: 12rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.photo-add .iconfont {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -70%);
  font-size: 60rpx;
  color: #c0c4cc;
}

.add-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 50%);
  font-size: 24rpx;
  color: #c0c4cc;
}

.desc-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.desc-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.desc-input {
  width: 100%;
  min-height: 200rpx;
  font-size: 28rpx;
  line-height: 1.6;
  color: #333;
}

.char-count {
  text-align: right;
  font-size: 24rpx;
  color: #909399;
  margin-top: 10rpx;
}

.quick-select {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
}

.quick-title {
  font-size: 28rpx;
  color: #909399;
  margin-bottom: 20rpx;
}

.quick-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 15rpx;
}

.tag-item {
  padding: 10rpx 24rpx;
  background: #f5f7fa;
  border-radius: 30rpx;
  font-size: 26rpx;
  color: #606266;
}

.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20rpx;
  background: #fff;
  box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.08);
}

.submit-btn {
  width: 100%;
  height: 88rpx;
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  border-radius: 44rpx;
  font-size: 32rpx;
  color: #fff;
  border: none;
}

.submit-btn[disabled] {
  background: #dcdfe6;
  color: #c0c4cc;
}
</style>

